<template>
  <div class="building-detail-wrapper">
    <div class="top custom-detail">
      <div class="title">房屋基本信息</div>
      <el-row :gutter="20">
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">产权单位:</span>
          <span class="value">{{
            getDictValue('propertyUnit', form.propertyOwner)
          }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">不动产权证号:</span>
          <span class="value">{{ form.certificate }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">房屋名称:</span>
          <span class="value">{{ form.name }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">所在园区:</span>
          <span class="value">{{ form.parkName }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">详细地址:</span>
          <span class="value">{{ form.address }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">经纬度:</span>
          <span class="value">{{ form.position }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">建成年份:</span>
          <span class="value">{{ form.year }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">房屋类型:</span>
          <span class="value">{{
            getDictValue('buildingType', form.houseType)
          }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">房屋结构:</span>
          <span class="value">{{
            getDictValue('buildingType', form.houseType)
          }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">建筑高度(m):</span>
          <span class="value">{{ form.height }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">建筑总层数:</span>
          <span class="value">{{ form.floors }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">地下层数:</span>
          <span class="value">{{ form.undergroundFloors }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">证载用途:</span>
          <span class="value">{{ form.usage }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">证载面积(m²):</span>
          <span class="value">{{ form.certificateArea }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">实际面积(m²):</span>
          <span class="value">{{ form.actualArea }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">使用情况:</span>
          <span class="value">{{
            getDictValue('buildingType', form.houseType)
          }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">实物状况:</span>
          <span class="value">{{
            getDictValue('buildingStatus', form.houseStatus)
          }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">是否为危房:</span>
          <span class="value">{{ getDictValue('yn', form.dangerHouse) }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">危房等级:</span>
          <span class="value">{{
            getDictValue('buildingLevel', form.dangerLevel)
          }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">是否为重点区域:</span>
          <span class="value">{{ getDictValue('yn', form.keyArea) }}</span>
        </el-col>
        <el-col :md="12" :lg="8" :xl="6">
          <span class="label">入驻企业数:</span>
          <span class="value">{{ form.legendUrl }}</span>
        </el-col>
        <el-col :md="24" :lg="24" :xl="24">
          <span class="label">备注说明:</span>
          <span class="value">{{ form.remark }}</span>
        </el-col>
        <el-col :md="24" :lg="24" :xl="24">
          <span class="label">房屋范围:</span>
          <span class="value">
            <FileList width="250" :list="form.geojsonFile" />
          </span>
        </el-col>
        <el-col :md="24" :lg="24" :xl="24">
          <span class="label">房屋照片:</span>
          <span class="value"
            ><FileList fileType="picture" :list="form.imgList"
          /></span>
        </el-col>
      </el-row>
      <div class="title" style="margin-top: 20px">房屋所在土地信息</div>
      <el-table class="custom-table" :data="form.land">
        <el-table-column prop="propertyOwner" label="产权人">
          <template #default="scope">
            {{
              getDictValue('propertyUnit', scope.row.propertyOwner)
            }}</template
          >
        </el-table-column>
        <el-table-column prop="certificate" label="土地产权证号" />
        <el-table-column prop="name" label="宗地名称" />
        <el-table-column prop="area" label="土地面积(m²)" />
        <el-table-column prop="character" label="土地性质">
          <template #default="scope"
            >{{ getDictValue('landNature', scope.row.character) }}
          </template>
        </el-table-column>
        <el-table-column prop="usage" label="土地用途">
          <template #default="scope">
            {{ getDictValue('landUse', scope.row.usage) }}</template
          >
        </el-table-column>
        <el-table-column prop="useStatus" label="使用情况">
          <template #default="scope">
            {{ getDictValue('landUsage', scope.row.useStatus) }}</template
          >
        </el-table-column>
        <el-table-column prop="useYear" label="使用年限" />
        <el-table-column prop="remark" label="备注">
          <template #default="scope"> {{ form.regionRemark }}</template>
        </el-table-column>
      </el-table>
      <div class="title" style="margin-top: 20px">承租信息</div>
      <el-table class="custom-table" :data="form.renterList">
        <el-table-column prop="floor" label="楼层">
          <template #default="scope"> {{ scope.row.floor }}F </template>
        </el-table-column>
        <el-table-column prop="type" label="承租方类型">
          <template #default="scope">
            {{ getDictValue('tenantType', scope.row.type) }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="承租方名称" />
        <el-table-column prop="code" label="承租方代码" />
        <el-table-column prop="businessScope" label="经营范围" />
        <el-table-column prop="houseRenterRemark" label="备注" />
      </el-table>
    </div>
    <div class="bottom">
      <el-button @click="handleClose">返回</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import FileList from '@/components/fileList/index.vue'
import { buildingDetail } from '@/api/manager/dataManage/building'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { useDict } from '@/hooks/useDict'
const { getDictValue, getDictStyle } = useDict()

const form = ref({
  land: [],
  renterList: [],
})

const handleDetail = async () => {
  const res = await buildingDetail({ pkid: route.query.pkid })
  if (res.success) {
    // 处理园区范围文件
    if (res.data.geoJsonFile) {
      res.data.geojsonFile = [res.data.geoJsonFile]
    }
    delete res.data.geoJsonFile
    // 处理园区图片
    res.data.files = res.data.imgList
    delete res.data.imgList
    // 处理土地信息
    if (res.data.mapRegion) {
      res.data.land = [res.data.mapRegion]
    }
    form.value = { ...res.data }
  } else {
    ElMessage.error(res.message)
  }
}
const handleClose = () => {
  router.push({ name: 'building' })
}
onMounted(() => {
  if (route.query.pkid) {
    handleDetail()
  }
})
</script>
<style lang="scss" scoped>
.building-detail-wrapper {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
  box-sizing: border-box;
  padding-top: 20px;

  .top {
    width: 100%;
    height: calc(100% - 70px);
    box-sizing: border-box;
    padding: 0px 40px 20px 20px;
    overflow-y: auto;
  }

  .bottom {
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    border-top: 1px solid #d5deed;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.custom-table {
  height: auto !important;
}
.title {
  width: 100%;
  padding: 0 0 5px 15px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  color: #151515;
  position: relative;
  margin: 0px 0 10px 0;
  &::before {
    content: ' ';
    position: absolute;
    width: 4px;
    height: 16px;
    background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
    border-radius: 2px;
    top: 0px;
    left: 0px;
  }
  .el-button {
    margin-left: 10px;
  }
}
</style>
